import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Input, Cascader, message } from 'antd';
import OperModal from '@/component/common/OperModal';
const LabelItem = OperModal.LabelItem;
import { common_address_json } from '@/common/address_json';

import MModal from '@/component/common/MModal';

import ApiHelper from '@/store/ApiHelper';
import format from '@/tool/format';
import { add_account as api_add_account } from '@/constants/ApiTypes';

class CreateStoreModal extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired
    };
    defaultState = {
        account: '',
        password: '',
        store_name: '',
        city: '',
        area: '',
        address: '',
        alias: '',
        tel_phone: ''
    };
    state = this.defaultState;
    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.setState(this.defaultState);
        }
    }
    submit = async () => {
        const { account, password, store_name, city, area, address, alias, tel_phone } = this.state;
        if (format.trim(account) == '') {
            this.input_account.focus();
            return message.warn('请输入账号名！', 1.5);
        }
        if (password == '') {
            this.input_password.focus();
            return message.warn('请输入密码！', 1.5);
        }
        if (password.length < 6) {
            this.input_password.refs.input.select();
            return message.warn('密码必须大于等于6位！', 1.5);
        }
        if (city == '' || area == '') {
            return message.warn('请选择所在地区！', 1.5);
        }
        if (format.trim(store_name) == '') {
            this.input_store_name.focus();
            return message.warn('请输入门店名称！', 1.5);
        }
        if (format.trim(address) == '') {
            this.input_address.focus();
            return message.warn('请输入门店地址！', 1.5);
        }
        if (format.trim(alias) == '') {
            this.input_alias.focus();
            return message.warn('请输入门店别称！', 1.5);
        }
        if (format.trim(tel_phone) == '') {
            this.input_tel_phone.focus();
            return message.warn('请输入联系电话！', 1.5);
        }
        const data = {
            account_type: 1,
            account,
            password,
            org_name: store_name,
            city,
            area,
            address,
            alias,
            tel_phone
        };

        const result = await ApiHelper.requestPost(api_add_account, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
            this.props.onClose(true);
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    inputOnchange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };
    areaSelect = value => {
        this.setState({
            city: value[1],
            area: value[2]
        });
    };
    render() {
        const { visible, onClose } = this.props;
        const { submit, inputOnchange, areaSelect } = this;
        const inputStyle = { width: 200 };
        const LabelInput = name =>
            <Input name={name} ref={input => this[`input_${name}`] = input} value={this.state[name]} style={inputStyle} onChange={inputOnchange} />;
        return (
            <OperModal visible={visible} onClose={onClose} title="开通门店账号" width={330} height={355} onOk={submit}>
                <LabelItem width={66} align="right" label="账号名">
                    {LabelInput('account')}
                </LabelItem>
                <LabelItem width={66} align="right" label="密码">
                    {LabelInput('password')}
                </LabelItem>
                <LabelItem width={66} align="right" label="所在地区">
                    <Cascader options={common_address_json} placeholder="请选择地区" style={inputStyle} onChange={areaSelect}/>
                </LabelItem>
                <LabelItem width={66} align="right" label="门店名称">
                    {LabelInput('store_name')}
                </LabelItem>
                <LabelItem width={66} align="right" label="门店地址">
                    {LabelInput('address')}
                </LabelItem>
                <LabelItem width={66} align="right" label="门店别称">
                    {LabelInput('alias')}
                </LabelItem>
                <LabelItem width={66} align="right" label="联系电话">
                    {LabelInput('tel_phone')}
                </LabelItem>
            </OperModal>
        );
    }
}

export default CreateStoreModal;